<template>
    <div class="wh-100" style="background-color: #fff">
        <!--title&添加场地-->
        <div class="d-flex-between-center px-12 head-box" >
            <div class="fs-16 fw-7">困难帮扶台账</div>
            <div>
                <Button style="background-color: #fff" @click="handleImportButtonClick" v-show="isProvinceRole">
                    导入帮扶对象
                </Button>
                <Button style="background-color: #fff" @click="downloadTemplate" v-show="isProvinceRole">
                    下载导入帮扶对象模板
                </Button>
                <Button  @click="importFormView = true">导入帮扶台账</Button>
                <Button  @click="downloadTemplate2">下载导入帮扶台账模板</Button>

                <Button type="primary" v-show="false" @click="$router.push({ name: 'AddHelpers' })">+添加帮扶对象</Button>

                <Modal v-model="importFormView" title="导入帮扶台账" v-loading="modelLoading">
                    <Form :model="importForm" :label-width="80" class="FormStyle">
                        <!--                                    <FormItem label="导入方式: ">-->
                        <!--                                        <RadioGroup v-model="importForm.importMode">-->
                        <!--                                            <Row>-->
                        <!--                                                <Radio label="1">增加记录(只增加新的记录,已存在的记录不变)</Radio>-->
                        <!--                                            </Row>-->
                        <!--                                            <Row>-->
                        <!--                                                <Radio label="2">覆盖记录(只对存在的记录进行更新)</Radio>-->
                        <!--                                            </Row>-->
                        <!--                                            <Row>-->
                        <!--                                                <Radio label="3">增加+覆盖记录</Radio>-->
                        <!--                                            </Row>-->
                        <!--                                        </RadioGroup>-->
                        <!--                                    </FormItem>-->
                        <FormItem label="文件: ">
                            <Upload accept=".xlsx" :before-upload="handleUpload">
                                <Button icon="ios-cloud-upload-outline">点击上传</Button>
                            </Upload>
                            <div v-if="importForm.file !== null">
                                {{ importForm.file.name }}
                            </div>
                            <div>说明：请依据模板数据格式导入，文件格式必须为.xlsx</div>
                        </FormItem>
                    </Form>
                    <div slot="footer">
                        <Button @click="importFormcCncel">取消</Button>
                        <Button type="primary" :loading="importing" @click="importFormOk">开始上传</Button>
                    </div>
                </Modal>
            </div>
        </div>
        <!--搜索&导出-->
        <div class="d-flex-between-center px-12 head-box" >
            <div>
                <Button style="background-color: #fff" @click="handleExport">导出数据</Button>
<!--                暂时注释掉不显示-->
<!--                <Button style="background-color: #fff" @click="truncateData">清空数据</Button>-->
            </div>

            <div class="d-flex-align-center">
                <Input size="default" v-model="inputText" class="d-flex-center w_200p mr-8"
                       placeholder="按学校名称" clearable>
                </Input>
                <Input size="default" v-model="nameText" class="d-flex-center w_200p mr-8"
                       placeholder="学生姓名查找" clearable>
                </Input>
                <Select  v-if="showCollapse"  v-model="collegeText" clearable filterable placeholder="院系" class="w_200p mr-8">
                    <Option v-for="item in collegeList" :value="item" :key="item">{{ item }}</Option>
                </Select>

                <Input size="default" v-model="idCardText" class="d-flex-center w_200p mr-8"
                       placeholder="身份证号" clearable >
                </Input>
                <Select v-model="categoryText" clearable placeholder="帮扶类别" class="w_200p mr-8">
                    <Option value="脱贫家庭学生">脱贫家庭学生</Option>
                    <Option value="脱贫不稳定学生">脱贫不稳定学生</Option>
                    <Option value="边缘易致贫学生">边缘易致贫学生</Option>
                    <Option value="突发严重困难学生">突发严重困难学生</Option>
                    <Option value="城乡低保学生">城乡低保学生</Option>
                    <Option value="特困救助学生">特困救助学生</Option>
                    <Option value="孤儿学生">孤儿学生</Option>
                    <Option value="残疾学生">残疾学生</Option>
                    <Option value="事实无人抚养">事实无人抚养</Option>
                    <Option value="低保边缘家庭学生">低保边缘家庭学生</Option>
                    <Option value="支出型困难家庭学生">支出型困难家庭学生</Option>
                    <Option value="其他低收入家庭学生">其他低收入家庭学生</Option>
                </Select>

                <Select v-model="isKnqtbj" placeholder="是否困难生" clearable class="w_200p mr-8">
                  <Option value="1">是</Option>
                  <Option value="0">否</Option>
                  <Option value="-1">未标记</Option>
                </Select>

              <Select v-model="typeText" placeholder="帮扶结果" clearable class="w_100p mr-8">
                <Option value="1">已落实</Option>
                <Option value="0">未落实</Option>
              </Select>

                <DatePicker v-model="updateTimeText" @on-change="dateChange" type="month" placeholder="更新时间" class="w_100p mr-8"></DatePicker>

                <Button type="primary" size="default"  @click="handleSearch" class="ml-0 vertical-align-bottom seach-btn">搜索
                </Button>
            </div>
        </div>
        <!-- 使用一个单独的 class 区分布局 -->
        <Modal
            v-model="show"
            title="导入结果"
            :footer-hide="true"
        >
          <Table :columns="importColumns" :data="importList" >

          </Table>
        </Modal>
        <!--表格-->
        <div  class="table-height">

            <div v-ref-height="abca" class="wh-100 ">
                <div v-if="loading" class="wh-100 d-flex-around-center">
                    <Spin></Spin>
                </div>
                <div v-else class="wh-100">
                    <Table ref="table" v-if="tableData.length > 0" :height="abca.value" :columns="tableColumns" :data="tableData" >
                      <template slot="progress"  slot-scope="{ row }">
                        <span>{{row.progress?(row.progress+'%'):0}}</span>
                      </template>
                        <template slot-scope="{ row }" slot="operate">
                          <span v-show="!isProvinceRole" class="table-btn mr-12"
                          @click="edit(row)">修改</span>
                            <span class="table-btn" @click="lookStandingBook(row)">查看</span>
                        </template>
                    </Table>
                    <div v-else  class="wh-100">
                        <NoData class="wh-100"></NoData>
                    </div>
                </div>
            </div>
            <div class="w-100 fs-14 d-flex-center " style="height: 70px; background-color: #fff">
                <Page
                    :total="pages.total"
                    :page-size="pages.pageSize"
                    :current="pages.pageNumber"
                    @on-change="handleChangeCurrentPage"
                    @on-page-size-change="handleChangePageSize"
                    show-elevator
                    show-sizer
                    show-total
                    class-name="d-flex-center"
                    size="small"
                />
            </div>
        </div>
        <input ref="importFromFile" accept=".xls,.xlsx" type="file" style="display: none" @change="handleImport" />


        <el-dialog title="提示" :visible.sync="importPromptVisible" :close-on-press-escape="false" :close-on-click-modal="false"  width="30%" center>
            <div class="fs-16 d-flex d-flex-around-center">
                <div v-if="type === 'success'">
                    <Icon type="md-checkmark-circle" color="#67C23A" size="16px" />
                    <span style="color: #67c23a">{{ tipMessage }}</span>
                </div>
                <div v-if="type === 'error'">
                    <Icon type="md-close-circle" color="#F56C6C" size="16px" />
                    <div style="flex: 1; display: flex; justify-content: right; align-items: center">
                        <Button @click="handleExportErrData" type="info" style="margin-right: 20px">下载错误信息</Button>
                    </div>
                    <span style="color: #f56c6c; margin-left: 8px">{{ tipMessage }}</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getList, importExcel, truncateData } from '@/api/hardshipSupport';

import { excelExport } from '@/views/hardshipSupport/util';
import XLSX from 'xlsx';
import Cookies from 'js-cookie';
import { getDictDataByType } from '../../api';
import { getAllCollege, proGetAllCollage } from '../../api/bys/yx/yx';
import  NoData from '@/components/NoData.vue';
// region TODO 表格
const tableColumns = [
    {
        type: 'selection',
        width: 70
    },
    {
        title: '学校',
        key: 'campusAddress'
    },
    {
        title: '院系',
        key: 'currentStatus'
    },
    {
        title: '姓名',
        key: 'campusName'
    },

    {
        title: '身份证号',
        key: 'idCard',
        width: 180
    },
    {
        title: '帮扶类别',
        key: 'supportType'
    },
    {
      title: '帮扶进度',
      slot: 'progress'
    },
    {
        title: '帮扶人',
        key: 'supporter'
    },
    {
        title: '帮扶结果',
        key: 'supportStatus'
    },
    {
      title: '生源状态',
      key: 'sourceResultState',
      width: 120
    },
    {
        title: '更新时间',
        key: 'updateTime',
        width: 168
    },
    {
        title: '操作',
        slot: 'operate'
    }
];

const importColumns = [
    {
        title: '导入总数',
        key: 'count'
    },
    {
        title: '导入成功数',
        key: 'successCount'
    },
    {
        title: '导入重复数',
        key: 'repeatCount'
    },
    {
        title: '导入失败数',
        key: 'errorCount'
    },
    {
        title: '导入失败行数',
        key: 'errorRow'
    },
    {
        title: '导入失败原因',
        key: 'errorReason'
    }
];
// endregion

export default {
    components:{
        NoData
    },
    data() {
        return {
            tableHeight: 190,
            showCollapse: false,
            updateTimeText: '',
            typeText: '',
            categoryText: '',
            idCardText: '',
            collegeText: '',
            collegeList:[],
            categoryList:[],
            importPromptVisible: false,
            type: 'success',
            tipMessage: '',
            importErrorData: [],
            importFormView: false,
            importing: false,
            modelLoading: false,
            importForm: {
                file: null,
            },
            importList: [],
            show: false,
            pages: {
                pageSize: 10,
                pageNumber: 1,
                total: 0
            },
            tableData: [],
            tableColumns,
            importColumns,
            abca: { value: 0 },
            inputText: '', // 搜索框
            nameText: '',
            loading: false, // 表格loading状态,
            importButtonLoading: false,
            // 导入数据loading的 百分比
            count: 0,
            // 标志一下正在工作的状态
            isWorking: false,
            workingMsg: '',
          isKnqtbj:'',
            isProvinceRole: false // 是省级用户吗 只允许省级ROLE_PROVINCE 导入
        };
    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        this.pages.pageNumber = this.$route.query?.pageIndex || 1
        if (sessionStorage.roles) {
            let roles = JSON.parse(sessionStorage.roles);
            console.log(roles);
            this.isProvinceRole = roles.includes('ROLE_PROVINCE');
        } else {
            // 没有获取到role 回到登录页
            this.$router.push({ name: '/prologin' });
        }


        // 首先按条件查询
        // this.getCategoryList()
        this.getCollegeList()
        this.queryByCondition();
        console.log(this);
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    },
    methods: {
        onRestWindow() {
            // this.labelWidth = this.searchLabelWidth(140)
        },
        dateChange(data){
            this.updateTimeText=data
        },
        getCollegeList(){
            let userInfo=JSON.parse(Cookies.get('userInfo'))
            if(userInfo.resource == 1){
                proGetAllCollage().then(res => {
                    if(res.success){
                        if(res.result.length>0){
                            this.collegeList=res.result
                        }
                        this.showCollapse = true;
                    }
                })
            }else if(userInfo.resource == 2){
                this.showCollapse = true;
                getAllCollege({gxcode:userInfo.gxcode}).then(res => {
                    if (res.success) {
                        if(res.result.length>0){
                            res.result.map(item => {
                                this.collegeList.push(item.yxname)
                            })
                        }
                        this.showCollapse = true;
                    }
                })
            }

        },
        getCategoryList(){
            getDictDataByType('difficult-student-category').then(res => {
                if (res.success) {
                    this.categoryList = res.result;
                }
            });
        },
        edit(row){
        //   $router.push('addHelpers' + '?id=' + row.id+'?pIndex='+pages.pageSize)"
          this.$router.push({
            path:'/addHelpers',
            query:{
              id:row.id,
              pIndex:this.pages.pageNumber
            }
          })
        },
        lookStandingBook(row){
          if (row.sourceResult){
            this.$router.push({
              path:'/LookStandingBook',
              query:{
                id:row.id,
                pIndex:this.pages.pageNumber
              }
            })
          }else {
            this.$message({
              showClose: true,
              message: '未查询到该学生的生源信息,无法进行查看操作!'
            });
          }

          // $router.push('LookStandingBook' + '?id=' + row.id)
        },
        handleExportErrData() {
            let data = this.importErrorData;
            // data = data.map(item => {
            //     return {
            //         errorMsg: item.errorMsg,
            //         yxdm: item.yxdm,
            //         ksh: item.ksh,
            //         sfzh: item.sfzh,
            //         xm: item.xm,
            //         xbdm: item.xbdm,
            //         mzdm: item.mzdm,
            //         zzmmdm: item.zzmmdm,
            //         xldm: item.xldm,
            //         zydm: item.zydm,
            //         pyfsdm: item.pyfsdm,
            //         syszddm: item.syszddm,
            //         xz: item.xz,
            //         bysj: item.bysj,
            //         rxsj: item.rxsj,
            //         knslbdm: item.knslbdm,
            //         sfslbdm: item.sfslbdm,
            //         byqxdm: item.byqxdm,
            //         dwmc: item.dwmc,
            //         dwxz: item.dwxz,
            //         dwhy: item.dwhy,
            //         dwszd: item.dwszd,
            //         tyshxycode: item.tyshxycode,
            //         gzzwlb: item.gzzwlb,
            //         bdzqflbdm: item.bdzqflbdm,
            //         qwdwszddm: item.qwdwszddm,
            //         bdzbh: item.bdzbh,
            //         bdqssj: item.bdqssj,
            //         extendWord1: item.extendWord1,
            //         extendWord2: item.extendWord2,
            //         extendWord3: item.extendWord3,
            //         extendWord4: item.extendWord4,
            //         extendWord5: item.extendWord5,
            //         dxhwpdw: item.dxhwpdw,
            //         mobile: item.mobile,
            //         jtdh: item.jtdh,
            //         dwlxr: item.dwlxr,
            //         lxrdh: item.lxrdh,
            //         lxrsj: item.lxrsj,
            //         xxxs: item.xxxs,
            //         lxremail: item.lxremail,
            //         dwdz: item.dwdz,
            //         sfjdlk: item.sfjdlk,
            //         xh: item.xh,
            //         szyx: item.szyx,
            //         gzkzksbzdm: item.gzkzksbzdm,
            //         zyfx: item.zyfx,
            //         zy: item.zy,
            //     };
            // });
            // const wb = XLSX.utils.book_new();
            // data = [{ errorMsg: '错误信息', yxdm: 'YXDM', ksh: 'KSH', sfzh: 'SFZH', xm: 'XM',
            //     xbdm: 'XBDM', mzdm: 'MZDM', zzmmdm: 'ZZMMDM', xldm: 'XLDM', zydm: 'ZYDM',
            //     pyfsdm: 'PYFSDM', syszddm: 'SYSZDDM', xz: 'XZ', bysj: 'BYSJ', rxsj: 'RXSJ',
            //     knslbdm: 'KNSLBDM', sfslbdm: 'SFSLBDM', byqxdm: 'BYQXDM',  dwmc: 'DWMC',
            //     dwxz: 'DWXZDM', dwhy: 'DWHYDM', dwszd: 'DWSZDDM', tyshxycode: 'DWZZJGDM', gzzwlb: 'GZZWLBDM',
            //     bdzqflbdm: 'BDZQFLBDM', bdzqwdwmc: 'BDZQWDWMC', qwdwszddm: 'QWDWSZDDM', bdzbh: 'BDZBH', bdqssj: 'BDQSSJ',
            //     extendWord1: 'KZX1', extendWord2: 'KZX2', extendWord3: 'KZX3', extendWord4: 'KZX4', extendWord5: 'KZX5',
            //     dxhwpdw: 'DXHWPDW', mobile: 'MOBILEPHON', jtdh: 'JTDH', dwlxr: 'DWLXR', lxrdh: 'LXRDH', lxrsj: 'LXRSJ', xxxs: 'XXXS',
            //     lxremail: 'LXRDZYX', dwdz: 'DWDZ', sfjdlk: 'SFJDLK', xh: 'XH', szyx: 'SZYX', gzkzksbzdm: 'GZKZKSBZDM',
            //     zyfx: 'ZYFX', zy: 'ZY'}, ...data];

            data = data.map(item => {
                return {
                    data: item.data,
                    reason: item.reason,

                };
            });
            const wb = XLSX.utils.book_new();
            data = [{ reason: '错误信息', data: 'data'}, ...data];
            const ws = XLSX.utils.json_to_sheet(data, { skipHeader: true });
            XLSX.utils.book_append_sheet(wb, ws, '错误信息');
            XLSX.writeFile(wb, '错误信息.xlsx');
        },
        async importFormOk() {
            if (this.importForm.file == null) {
                this.$Message.info('请选择文件');
                return;
            }
            let formData = new FormData();
            formData.append('file', this.importForm.file);
            this.importing = true;
            this.postRequest('/HardshipSupport/importThree', formData, { transformRequest: [] }).then(res => {
                console.log("p---------------------------------------",res)
                let exportResult = res.result.result;
                if (exportResult.includes('导入失败')) {
                    this.$Message.error('导入失败');
                    this.tipMessage = exportResult;
                    this.type = 'error';
                    this.importErrorData = res.result.importErrorVoList;
                    this.importPromptVisible = true;
                    this.importing = false;
                    this.importFormcCncel();
                    this.queryByCondition();
                } else {
                    this.$Message.success('导入成功');
                    this.tipMessage = '导入成功';
                    this.type = 'success';
                    this.importPromptVisible = true;
                    this.importing = false;
                    this.importFormcCncel();
                    this.queryByCondition();
                }
            });

        },
        importFormcCncel() {
            this.importForm.file = null;
            this.importFormView = false;
        },
        handleUpload(file) {
            const fileExt = file.name
                .split('.')
                .pop()
                .toLocaleLowerCase();
            // if (!(fileExt == 'xlsx' || fileExt == 'xls')) {
            //     this.$Notice.warning({
            //         title: '文件类型错误',
            //         desc: '所选文件‘ ' + file.name + ' ’不是EXCEL文件，请选择后缀为.xlsx或者.xls的文件。'
            //     });
            // }
            if (!(fileExt == 'xlsx')) {
                this.$Modal.error({
                    title: '文件类型错误',
                    content: '所选文件‘ ' + file.name + ' ’不是EXCEL文件，请选择后缀为.xlsx的文件。',
                    closable: true
                });
                // this.$Notice.warning({
                //     title: '文件类型错误',
                //     desc: '所选文件‘ ' + file.name + ' ’不是EXCEL文件，请选择后缀为.xlsx的文件。'
                // });
            } else {
                this.importForm.file = file;
            }
            // this.importForm.file = file;
            return false;
        },
        handleSearch() {
            this.pages.pageNumber = 1;
            this.queryByCondition();
        },
        // 按条件查询
        async queryByCondition() {
            console.log(this.pages,this.isKnqtbj);
            this.loading = true;
            let response = {
                order: '', // 配置升序降序 暂时用不到
                pageNumber: this.pages.pageNumber,
                pageSize: this.pages.pageSize,
                schoolName: this.inputText,
                name: this.nameText,
                college:this.collegeText,
                idCard:this.idCardText,
                helpCategory:this.categoryText,
                updateTime:this.updateTimeText,
                helperResult:this.typeText,
                sort: '' ,// 暂时用不到
              isKnqtbj:this.isKnqtbj
            };
            let res = await getList(response);
            const { code, result } = res;
            const data = result.result || [];
            if (code === 200) {
                this.pages.total = result.total;
                // 在这里处理数据
                this.tableData = data.map(item => {
                    return {
                        campusName: item.name ? item.name : '',
                        campusAddress: item.schoolName ? item.schoolName : '',
                        currentStatus: item.college ? item.college : '',
                        idCard: item.idCard ? item.idCard : '',
                        supportType: item.helpCategory ? item.helpCategory : '',
                        supporter: item.helperName ? item.helperName : '',
                        supportStatus: item.helpResult ? (item.helpResult == 0 ? '未落实':'已落实') : '',
                        sourceResult:item.sourceResult,
                        sourceResultState: !item.sourceResult ? '无生源':'有生源'    ,
                        updateTime: item.updateTime ? item.updateTime : '',
                        id: item.id ? item.id : ''
                    };
                });
                this.loading = false;
                console.log("data",data);
            } else {
                // 服务器出错
                this.loading = false;
                this.$Message.error('服务器出错');
            }
        },
        handleChangeCurrentPage(number) {
            this.pages.pageNumber = number;
            this.queryByCondition();
        },
        handleChangePageSize(number) {
            this.pages.pageSize = number;
            this.queryByCondition();
        },
        async truncateData() {
            this.loading = true;
            let res = await truncateData();
            if (res.success) {
                this.$Message.success('清空成功');
                this.queryByCondition();
                this.loading = false;
            }
        },
        downloadTemplate2(){
            window.location.href = process.env.BASE_URL + '困难帮扶台账导入模板.xlsx';

        },
        downloadTemplate(){
            window.location.href = process.env.BASE_URL + '困难帮扶对象导入模板.xlsx';
        },
        handleImportButtonClick() {
            if (this.isWorking) {
                this.$Message.warning({
                    content: this.workingMsg
                });
                return;
            }

            this.$refs.importFromFile.click();
        },
        // 按钮点击事件
        async handleImport() {
            const name = this.$refs.importFromFile.files[0].name.split('.');
            console.log(name);
            if (name[1] !== 'xls' && name[1] !== 'xlsx') {
                this.$Message.error({
                    content: '未上传excel文件'
                });
                return;
            }
            // const closeMsg = this.showCountLoading('预计导入还需要');
            let data = new FormData();
            data.append('file', this.$refs.importFromFile.files[0], this.$refs.importFromFile.files[0].name);
            data.append('importMode', '1');

            let res = await importExcel(data);
            if (res.code !== 200) {
                this.$Message.error({
                    content: res.message
                });
            }else {
              this.$Message.success( res.message)
            }

            // let timer = setInterval(() => {
            //     this.postRequest('/HardshipSupport/monitorStatus').then(res => {
            //         if (res.result.status === '1.00') {
            //             closeMsg();
            //             this.$emit('stop_loop_req');
            //             this.$Message.success({
            //                 content: '导入成功',
            //                 duration: 10
            //             });
            //             this.queryByCondition();
            //             this.show = true;
            //             this.importList = [res.result.hardshipSupportImport];
            //         } else if (res.message === '尚未导入文件') {
            //             closeMsg();
            //             this.$emit('stop_loop_req');
            //         } else {
            //             this.count = res.result.status;
            //         }
            //     });
            // }, 5000);
            // this.$on('stop_loop_req', () => {
            //     clearInterval(timer);
            //     console.log('停止计时器');
            // });
        },

        async handleExport() {
            if (this.isWorking) {
                this.$Message.warning({
                    content: this.workingMsg
                });
                return;
            }

            const table = this.$refs.table;
            console.log(table);
            let selectData = table.getSelection();
            let ids = [];
            if (selectData.length === 0) {
            } else {
                selectData.forEach(item => {
                    ids.push(item.id);
                });
            }
            const closeMsg = this.showCountLoading();
            try {
                this.isWorking = true;
                this.workingMsg = '正在导出数据，请稍后...';
                let result = await excelExport(ids);
                let url = window.URL.createObjectURL(result);
                let a = document.createElement('a');
                a.href = url;
                a.download = '困难帮扶台账.xlsx';
                a.click();
                window.URL.revokeObjectURL(url);
                closeMsg();
                setTimeout(() => {
                    this.$Message.success({
                        content: '导出成功',
                        duration: 10
                    });
                }, 300);
            } catch (e) {
                closeMsg();
                setTimeout(() => {
                    this.$Message.error({
                        content: '导出失败',
                        duration: 10
                    });
                });
            } finally {
                this.isWorking = false;
                this.workingMsg = '';
            }
        },
        showCountLoading() {
            const closeMsg = this.$Message.info({
                duration: 0,
                render: h => {
                    let data = this.count * 100;

                    return h('span', [`已完成${data.toFixed(0)}%`]);
                }
            });
            return () => {
                closeMsg();
                this.count = 0;
            };
        }
    },
    beforeDestroy() {
        // 全局销毁Message
        this.$Message.destroy();
    }
};
</script>

<style lang="less" scoped>

.table-btn {
    color: #1677ff;
    cursor: pointer;
}


.head-box {
    height: 60px; 
    border-bottom: 1px solid #eef1f7;
}
.table-height {
    height: calc(100% - 190px)
}
.seach-btn {
   width: 80px; border-radius: 0 3px 3px 0
}
</style>
